<template>
	<view class="card_warp">
		<view class="card_header_warp">
			<view class="header_title">{{$t("card.title")}}</view>
			<view class="header_operation">
				<view class="header_apply_card recharge_card" @click="synchronizedBalance">
					<up-image src="/static/comm/card_cz.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
					<text style="margin-left: 10rpx;">{{$t("card.synchronized.balance")}}</text>
				</view>
				<view class="header_apply_card header_apply_mar_card" @click="jumpApplyCard">
					<up-image src="/static/comm/add_b.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
					{{$t("card.apply.card")}}
				</view>
			</view>
		</view>
		<view class="card_banner_warp">
			<up-image src="/static/card/banner.png" width="100%" height="100" bgColor="#f1f6ff00" mode="widthFix"></up-image>
		</view>
		<view class="card-cz">
			<view class="card_list_title">
				<view 
					:class="form.type === CARD_TYPE.VIRTUAL ? 'card_list_title_item card_list_title_item_sel':'card_list_title_item'" 
					@click="checkCard(CARD_TYPE.VIRTUAL)">
					{{$t("common.card.virtual")}}
				</view>
				<view 
					:class="form.type === CARD_TYPE.PHYSICAL ? 'card_list_title_item card_list_title_item_sel':'card_list_title_item'" 
					@click="checkCard(CARD_TYPE.PHYSICAL)"
				>
					{{$t("common.card.entity")}}
				</view>
			</view>
			<view class="card-cz-right" @click="jumpBankTransfer">
				<up-image src="/static/card/zz.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
				<view class="card-cz-right-msg">{{$t('mine.transfer')}}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'816rpx'}">
			<view class="card_list_item" v-for="(item,index) in cardList" :key="item.id" v-if="cardList && cardList.length !==0">
				<up-image :src="item.cardImg" width="100%" height="100" bgColor="#f1f6ff00" mode="widthFix"></up-image>
				<view class="card_list_item_info">
					<view class="item_show">
						<up-image v-if="item.show" src="/static/comm/xs.png" width="20" height="20" bgColor="#f1f6ff00" mode="widthFix" @click="checkCardShow(false,index)"></up-image>
						<up-image v-else src="/static/comm/yc.png" width="20" height="20" bgColor="#f1f6ff00" mode="widthFix" @click="checkCardShow(true,index)"></up-image>
					</view>
					<view class="item_amount">
						<text v-if="item.show">
							{{item.amount}}
							<text style="font-size: 28rpx;margin-right: 10rpx;" v-if="item.show">USDT</text>
						</text>
						<text v-else>********</text>
					</view>
					<view class="item_info">
						<view class="item_info_title">
							<view>{{item.ownerLastName}} {{item.ownerFirstName}}</view>
							<view
								class="item_info_title_but" 
								:style="{
									'background': item.btnBgColor,
									'color':item.btnFontColor,
								}"
								@click="jumpBalanceRecharge(item)"
								v-if="form.type === CARD_TYPE.VIRTUAL || (form.type === CARD_TYPE.PHYSICAL && item.isActivated)"
							>{{$t("common.recharge")}}</view>
							<view 
								class="item_info_title_but" 
								:style="{
									'background': item.btnBgColor,
									'color':item.btnFontColor,
								}"
								@click="jumpActivate(item)"
								v-else-if="form.type === CARD_TYPE.PHYSICAL && !item.isActivated"
							>{{$t("card.activate")}}</view>
						</view>
						<view class="item_info_but">
							<view class="time">
								<text>MONTH/YEAR</text>
								<text style="margin-left: 10rpx;">{{formatDate2(item.ctdate)}}</text>
							</view>
							<view class="card_number" v-if="item.show">{{item.cardNo}}</view>
							<view class="card_number" v-else>**** **** **** **** **</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="not_data_warp">
				 <up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
				 <view class="not_data_msg_warp">{{$t("card.not.content")}}</view>
			</view>
			<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
		</scroll-view>
		<!-- 温馨提示 -->
		<up-modal :show="openShow" :showConfirmButton = "false">
			<view class="slot-content">
				<view class="close_warp" @click="openShow=false;">
					<up-image src="/static/comm/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="content_">
					<view class="content_1">{{$t("common.warm.reminder")}}</view>
					<view class="content_2">{{$t("mine.logout.content")}}</view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="OKFun">{{$t("common.confirm")}}</view>
					<view class="but_close" @click="openShow=false;">{{$t("common.cancel")}}</view>
				</view>
			</view>
		</up-modal>
		
	</view>
</template>

<script>
	import { getMyCards,syncBalance } from '@/api/card.js';
	import { CARD_TYPE } from '@/utils/enumUtils.js';
	import { formatDate2 } from '@/utils/index.js';
	
	export default {
		computed: {
		    CARD_TYPE() {
		      return CARD_TYPE;
		    },
		},
		data() {
			return {
				form:{
					type:CARD_TYPE.VIRTUAL,
					page:1,
					pageSize:10,
				},
				cardList:[],
				loading:false,
			}
		},
		onLoad() {
		},
		onShow() {
			this.checkCard(CARD_TYPE.VIRTUAL);
		},
		mounted() {
			this.checkCard(CARD_TYPE.VIRTUAL);
		},
		methods: {
			formatDate2,
			checkCard(type){
				this.cardList=[];
				this.form.type=type;
				this.form.page=1;
				this.loadData();
			},
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
			// 加载数据的方法
			async loadData() {
			  if (this.loading) return; // 如果正在加载，则不重复加载
			  this.loading = true; // 设置加载状态为true
			  try {
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				if(newData.entitys && newData.entitys.length !==0){
					const data = newData.entitys;
					data.map(item=>{
						return{
							...item,
							isShow:false,
						}
					})
					this.cardList = [...this.cardList, ...data]; // 将新数据添加到列表中
					this.form.page++; 
				}
			  } catch (error) {
				console.error('加载数据失败:', error);
			  } finally {
				this.loading = false; // 设置加载状态为false
			  }
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData(page, pageSize) {
				const params = {
					type:this.form.type,
					page,
					pageSize,
				}
				const data = await getMyCards(params);
				if(data && data.bizcode === 100 && data.data){
					return data.data
				}else{
					return [];
				}
			},
			checkCardShow(status,index){
				this.cardList[index].show = status;
			},
			jumpApplyCard(){
				uni.navigateTo({
					url:"/pages/card_apply/card_apply",
				})
			},
			jumpBalanceRecharge(item){
				uni.navigateTo({
					url:"/pages/balance_recharge/balance_recharge?id="+item.id,
				})
			},
			/**
			 * 去激活
			 */
			jumpActivate(item){
				uni.navigateTo({
					url:"/pages/activate_card/activate_card?id="+item.id,
				})
			},
			/**
			 * 同步余额
			 */
			async synchronizedBalance(){
				const resp = await syncBalance();
				if(resp && resp.bizcode === 100){
					this.cardList=[];
					this.form.page=1;
					this.loadData(); // 加载更多数据
				}
			},
			jumpBankTransfer(){
				uni.navigateTo({
					url:"/pages/bank_transfer/bank_transfer",
				})
			}
		},
		destroyed(){
			console.log("销毁。。。。。")
			this.cardList = [];
		}
	}
</script>

<style lang="scss" scoped>
.card_warp{
	height: calc(100vh - 132rpx);
	overflow: auto;
	padding: 130rpx 30rpx 30rpx;
}
.card_header_warp{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.header_title{
		font-weight: 800;
		font-size: 44rpx;
		color: #111111;
	}
	.header_operation{
		display: flex;
	}
	.header_apply_card{
		display: flex;
		align-items: center;
		background: $app-policy-color;
		border-radius: 28rpx;
		padding: 14rpx 22rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.recharge_card{
		background: #000000;
		padding: 14rpx 40rpx;
	}
	.header_apply_mar_card{
		margin-left: 20rpx;
	}
}
.card_banner_warp{
	margin-top: 40rpx;
}
.card-cz{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.card-cz-right{
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 32rpx;
		border: 1px solid #999999;
		padding: 10rpx 30rpx;
		.card-cz-right-msg{
			margin-left: 10rpx;
			font-size: 22rpx;
			color: #333333;
		}
	}
}
.card_list_title{
	margin: 20rpx 0;
	font-weight: bold;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	.card_list_title_item{
		margin-right: 20rpx;
		color: #333333;
	}
	.card_list_title_item_sel{
		color: #FFFFFF;
		background: #3D3D3D;
		border-radius: 44rpx;
		padding: 12rpx 30rpx;
	}
}
.card_list_item{
	margin-top: 20rpx;
	position: relative;
	.card_list_item_info{
		position: absolute;
		top: 0;
		width: 100%;
	}
	.item_show{
		float: right;
		padding: 12rpx 20rpx;
		background: #081019;
		border-radius: 0rpx 40rpx 0rpx 40rpx;
		opacity: 0.4;
		margin-top: 2rpx;
	}
	.item_amount{
		font-weight: bold;
		font-size: 60rpx;
		color: #FFFFFF;
		margin: 200rpx 0 0 40rpx;
	}
	.item_info{
		padding: 50rpx 40rpx 0 40rpx;
		color: #FFFFFF;
		.item_info_title{
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			.item_info_title_but{
				border-radius: 30rpx;
				font-weight: bold;
				font-size: 24rpx;
				padding: 10rpx 40rpx;
			}
		}
		.item_info_but{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;
		}
		.time{
			font-weight: 500;
			font-size: 18rpx;
			color: #FFFFFF;
		}
		.card_number{
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
}
</style>
